<template>
    <ul class="render-list-wrapper">
        <li v-for="item in list" :key="item.id">
            <!-- 如果renderFunc不存在就渲染span -->
            <span   v-if="!renderFunc">{{item.name}}</span>
            <!-- 否则就渲染函数式组件形成的元素 -->
            <function-module v-else :name="item.name" :time="item.time" :renderFunc="renderFunc"></function-module>
        </li>
    </ul>
</template>
<script>
// 引入函数式组件
import functionModule from './functionModule'
export default {
    components: { functionModule },
    data() {
        return {
            
        };
    },
    props: {
        list:{
            type:Array,
            default:[]
        },
        renderFunc:{
            type:Function,
            default:()=>{}
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>